---
title: Rückmeldung
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

Zeigt den Fortschritt oder Countdown an und bewegt sich von rechts nach links.

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props       | Typ          | Beschreibung                                                                         | Standard  |
| ----------- | ------------ | ------------------------------------------------------------------------------------ | --------- |
| Dauer       | nummer       | Die Gesamtdauer der Fortschrittsbalken-Animation in Millisekunden                    | 3         |
| Verzögerung | nummer       | Die Verzögerung beim Starten der Fortschrittsbalken-Animation in Millisekunden       | 0         |
| Easing      | Zeichenkette | Easing-Funktion für die Fortschrittsbalken-Animation                                 | easeInOut |
| Balkenhöhe  | nummer       | The height of the bar in pixels                                                      | 24        |
| Balkenfarbe | Zeichenkette | The color of the bar                                                                 | gray80    |
| AutoStart   | boolesch     | If `true`, the progress bar animation starts automatically when the component mounts | `wahr`    |

</Tab>
</Tabs>

## Zirkularer Fortschrittsbalken

Zeigt den Fortschritt einer Aufgabe an, wird häufig auf Ladebildschirmen oder in Bereichen verwendet, in denen Sie laufende Prozesse an den Benutzer kommunizieren möchten.

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| Props        | Typ          | Beschreibung                                 | Standard     |
| ------------ | ------------ | -------------------------------------------- | ------------ |
| größe        | nummer       | Die Größe des zirkularen Fortschrittsbalkens | 50           |
| Balkenbreite | nummer       | Die Breite der Fortschrittsbalkenlinie       | 5            |
| Balkenfarbe  | Zeichenkette | The color of the progress bar                | currentColor |

</Tab>

</Tabs>
